// 导入base.less
@import url(base.less);
// 导入normalize.less
@import url(normalize.less);
// 导入common.less公共样式
@import url(commom.less);
// 声明基准值变量
// width: (10 / 37.5rem)
@baseSize: 37.5rem;
@gColor: #14916a;

// 欢迎板块
.welcome {
  width: (375 / @baseSize);
  background-color: #fff;
  padding-top: (25 / @baseSize);

  .welcome-mian {
    display: flex;
    flex-direction: column;
  }


  .welcome-content {
    width: (350 / @baseSize);
    font-size: (12 / @baseSize);
    line-height: (18 / @baseSize);
    color: #333;
    margin-bottom: (14 / @baseSize);
  }

  .contact {
    display: flex;
    width: (350 / @baseSize);
    height: (96 / @baseSize);
    box-sizing: border-box;


    .pic {
      width: (144 / @baseSize);
      height: (96 / @baseSize);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;

      }
    }

    .tel {
      display: flex;
      justify-content: space-evenly;
      height: 100%;
      flex-direction: column;
      align-items: flex-start;
      width: (210 / @baseSize);
      background-color: @gColor;

      p {
        font-weight: bold;
        font-size: (18 / @baseSize);
        line-height: (14 / @baseSize);
        // font-family: Arial, Helvetica, sans-serif;
        color: #fff;
        margin-left: (12 / @baseSize);
        // margin-bottom: (4 / @baseSize);

        i {
          font-size: (13 / @baseSize);

          margin-right: (12 / @baseSize);
          vertical-align: top;
        }
      }

      a {
        display: inline-block;
        font-size: (12 / @baseSize);
        color: @gColor;
        background-color: #fff;
        padding: (7 / @baseSize) (20 / @baseSize);
        border-bottom-right-radius: (14 / @baseSize);
        border-top-left-radius: (14 / @baseSize);
        margin-left: (109 / @baseSize);
      }
    }
  }
}

// 装修服务板块
.housekeeping {
  width: (375 / @baseSize);
  background-color: #fff;
  padding-top: (25 / @baseSize);
  padding-bottom: (12 / @baseSize);

  .housekeeping-mian {
    display: flex;
    flex-direction: column;
  }

  .list-pic {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      position: relative;
      width: (173 / @baseSize);
      height: (117 / @baseSize);
      margin-bottom: (12 / @baseSize);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }



      // 图片遮罩
      .mask {
        font-size: (18 / @baseSize);
        text-align: center;
        position: absolute;
        left: (45 / @baseSize);
        right: (45 / @baseSize);
        top: (37 / @baseSize);
        bottom: (37 / @baseSize);
        background-color: rgba(0, 0, 0, .5);
        padding: (13 / @baseSize) 0;
        // box-sizing: border-box;
        // opacity: 0;
        display: none;
        transition: all .3s;

        a {
          color: #fff;

        }

      }

    }
  }
}

// 让遮罩层显示出来（点击事件）